<template>
  <div class="wrapper">
    <div class="form">
      <div class="item">
        <span>可提现余额</span>
        <p>{{ balance | money }}</p>
      </div>
      <div class="item">
        <span>银行卡</span>
        <select name="" id="" v-model="bankCard">
          <option value="">点击选择银行卡</option>
          <option v-for="item of list" :value="item.id" :key="item.id">{{ item.bank }} ( {{ item.number }} )</option>
        </select>
      </div>
      <div class="item">
        <span>提现金额</span>
        <input type="tel" v-model="price" placeholder="请输入提现金额">
      </div>
      <div class="item">
        <span>手续费率</span>
        <p>0.5%</p>
      </div>
    </div>
    <BigBtn text="提交" @click.native="submit" />
  </div>
</template>

<script>
  import _ from 'lodash'
  import BigBtn from '@/components/bigBtn/BigBtn.vue'
  import { mapState } from 'vuex'
  export default {
    name: 'Drawcash',
    components: {
      BigBtn
    },
    created() {
      this._getBankList()
    },
    data() {
      return {
        balance: this.$route.params.balance,
        bankCard: '',
        price: '',
        list: []
      }
    },
    computed: {
      ...mapState(['openId'])
    },
    methods: {
      async _getBankList() {
        let { data: { code, data } } = await this.$axios({
          url: '/v1/bank/show',
          method: 'GET',
          params: {
            openid: this.openId
          }
        })
        if (code === 0) {
          this.list = data.items.map(item => {
            let startIndex = item.number.length - 4
            item.number = item.number.substring(startIndex)
            return item
          })
        }
      },
      submit() {
        if (!this.bankCard) {
          this.$toast('请选择银行卡')
          return
        }
        if (!this.price || isNaN(this.price)) {
          this.$toast('请正确输入提现金额')
          return
        }
        if (Number(this.price) > Number(this.balance)) {
          this.$toast('提现金额不能大于余额')
          return
        }
        this._submit()
      },
      _submit: _.throttle(async function() {
        let { data: { data, code } } = await this.$axios({
          url: '/v1/platform/money',
          method: 'POST',
          data: {
            money: this.price,
            bank: this.bankCard,
            openid: this.openId
          }
        })
        if (code === 0) {
          this.$toast(data)
          setTimeout(() => {
            this.$router.go(-1)
          }, 1500)
        }
      }, 2000, { trailing: false })
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/base.scss';
  .wrapper {
    min-height:100vh;
    padding-top: 0.2rem;
    background: #eee;
  }
  .form {
    padding: 0 0.2rem;
    font-size: 0.24rem;
    background: #fff;
  }
  .item {
    display: flex;
    align-items: center;
    padding: 0.2rem 0;
    border-bottom: 1px solid $bgGray;
    span {
      display: block;
      flex: 0 0 1.6rem;
      width: 1.6rem;
      margin-right: 0.4rem;
    }
    input, select {
      flex: 1;
      display: block;
      font-size: 0.24rem;
    }
  }
</style>
